<template>
  <div>
    <h2>.sync修饰符</h2>
    <!-- 父子传值
           父传子
                子组件标签  :属性名="父组件属性"
                子组件内：
                    props:{
                        属性名:{....}
                    }
           子传父
                子组件标签    @子组件方法名="父组件方法"
                子组件内：this.$emit('子组件方法名')

        .sync:父子传值的语法糖，用于数据的双向绑定，类似v-model
          子组件标签 :属性名="父组件属性"  @update:属性名="父组件属性=$event"
          子组件标签 :属性名.sync="父组件属性"
          子组件内：
               props:{属性名:{...}}
               this.$emit('update:属性名',实参值)
          v-model:一个组件只能使用一个v-model

     -->
    <Son :num="appNum" @update:num="appNum = $event" />
    <h4>{{ appNum }}</h4>
    <Son :num.sync="appNum" />
  </div>
</template>
<script>
import Son from './components/son'
export default {
  components: {
    Son
  },
  data() {
    return {
      appNum: 1
    }
  }
}
</script>
<style></style>
